<template>
  <div class="mb-5" id="recruit-home" :style="{minHeight: height+'px'}" v-loading="recruits.loading">
    <el-container style="justify-content: center;">
      <el-header class="recruit-home-header">
        <div class="recruit-home-search main-width">
          <el-input placeholder="请输入职位名称进行搜索" v-model="keywords" class="input-with-select" @keyup.enter.native="newSearch()">
            <el-button slot="append" icon="el-icon-search" @click="newSearch()"></el-button>
          </el-input>
        </div>
        <!-- <div class="recruit-home-type">
          <el-radio-group v-model="type">
            <el-radio-button label=""><span>综合</span></el-radio-button>
            <el-radio-button label="0D6E88FE7F3511E8AC3FFA7DEC4CE400"><span>招聘1</span></el-radio-button>
            <el-radio-button label="0D6E894F7F3511E8AC3FFA7DEC4CE400"><span>招聘2</span></el-radio-button>
            <el-radio-button label="0D6E89647F3511E8AC3FFA7DEC4CE400"><span>招聘3</span></el-radio-button>
            <el-radio-button label="0D6E89747F3511E8AC3FFA7DEC4CE400"><span>招聘4</span></el-radio-button>
            <el-radio-button label="0D6E89947F3511E8AC3FFA7DEC4CE400"><span>招聘5</span></el-radio-button>
          </el-radio-group>
        </div> -->
      </el-header>
      <el-container>
        <!-- <el-main > -->
          <div class="" style="width: 950px;margin-right: 50px;">
            <div style="text-align: center; padding: 15px;" v-show="recruits.rows.length === 0">暂无数据</div>
            <div v-for="(data, index) in recruits.rows" :key="index" id="recruit-list"
                 class="py-3 border-top" :class="{'border-bottom': index === recruits.rows.length - 1}"
                 @click="seePosition(data)">
              <div class="container">
                <div class="row align-items-center">
                  <div class="col-4">
                    <p id="recruit-position" class="font-weight-bold mb-2 mt-0" style="font-size: 20px;">{{data.positionName}}</p>
                    <div class="list-footer-fs" style="font-size: 14px;">
                      <p class="mb-2"><span style="color: #cb5e29;font-weight: bold;font-size: 16px;margin-right: 30px;">{{data.salary}}</span>{{data.workYear}}&nbsp;/&nbsp;{{getEducation(data.education)}}</p>
                      <p class="mb-0">发布于&nbsp;&nbsp;{{$formatYMD(data.ctime)}}</p>
                    </div>
                  </div>
                  <div class="col-6">
                    <p id="recruit-ec" class="font-weight-bold mb-2 mt-0" style="font-size: 20px;" @click.stop="seeEC(data)">{{data.companyName}}</p>
                    <div class="list-footer-fs" style="font-size: 14px;">
                      <p class="mb-2">{{data.workCity}}</p>
                      <p class="mb-0">{{getNature(data.nature)}}</p>
                    </div>
                  </div>
                  <div class="col">
                    <div style="width: 100px;" class="fr">
                      <div class="zoomImage-70" v-lazy:background-image="data.companyLogo"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-button type="success fr width-200" style="margin: 20px 0;"
            plain round  @click="recruits.addLoad()" v-show="recruits.hasMore">查看更多</el-button>
          </div>
        <!-- </el-main> -->
        <el-aside width="250px">
          <el-button type="primary" class="recruit-btn" @click="seeOrPublish()">{{isCmember ? '发布招聘' : '投递记录'}}</el-button>
        </el-aside>
      </el-container>
    </el-container>
    <back-top></back-top>
  </div>
</template>
<script>
import PagedList from '../../libs/PagedList.js'

export default {
  name: 'recruitlist',
  title: '招聘列表',
  data() {
    return {
      recruits: new PagedList('/mscs/position/findAllPosition', 20),
      keywords: '',
      educationes: [
        {label: '博士', value: 'DOCTOR'},
        {label: '硕士', value: 'MASTER'},
        {label: '本科', value: 'BACHELOR'},
        {label: '大专', value: 'COLLEGE'},
        {label: '中技', value: 'TECHNICAL_SCHOOL'},
        {label: '中专', value: 'TECHNICAL_SECONDARY_SCHOOL'},
        {label: '高中以下', value: 'HIGH_SCHOOL'}
      ],
      natures: [
        {label: '全职', value: 'FULL_TIME'},
        {label: '兼职', value: 'PART_TIME'},
        {label: '实习', value: 'PRACTICE'}
      ]
    }
  },
  mounted () {
    this.newSearch()
  },
  methods: {
    newSearch () {
      this.recruits.search({search: this.keywords})
    },
    getEducation (str) {
      for (let i = 0; i < this.educationes.length; i++) {
        if (str === this.educationes[i].value) {
          return this.educationes[i].label
        }
      }
    },
    getNature (str) {
      for (let i = 0; i < this.natures.length; i++) {
        if (str === this.natures[i].value) {
          return this.natures[i].label
        }
      }
    },
    seeEC (row) {
      const {href} = this.$router.resolve({
        name: 'echome',
        params: {id: this.$compileStr(row.enterpriseId)}
      })
      window.open(href, '_blank')
    },
    seePosition (row) {
      const {href} = this.$router.resolve({
        name: 'recruitdetails',
        params: {id: this.$compileStr(row.positionId)}
      })
      window.open(href, '_blank')
    },
    seeOrPublish () {
      if (!this.isLogin) {
        this.$openLogin()
        return
      }
      if (this.isCmember) {
        this.$router.push({name: 'publishrecruit'})
      } else {
        this.$router.push({name: 'submitrecord'})
      }
    }
  },
  computed: {
    isLogin () {
      return this.$store.state.user.isLogin
    },
    isCmember () {
      if (!this.$store.state.user || !this.$store.state.user.user) {
        return false
      }
      let userType = this.$store.state.user.user.user.userType
      return userType === 'CMEMBER' || userType === 'COMPANY'
    },
    height () {
      let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      return height
    }
  },
}
</script>
<style lang="scss">
  #recruit-list {
    cursor: pointer;
    #recruit-position,
    #recruit-ec {
      &:hover {
        color: #94C05A;
      }
    }
  }
  #recruit-home {
    .el-container {
      justify-content: center;
    }
    .recruit-btn {
      width: 250px;
      font-size: 20px;
      padding: 16px;
    }
  }
  
  .title-img {
    display: inline-block;
    .el-upload-dragger {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
  .recruit-home-header {
    height: 100px!important;
    background-color: #edefea;
    margin-bottom: 30px;
    > .recruit-home-search {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      .el-input-group {
        // flex: 1;
        button {
          color: #FFFFFF;
          background-color: #94C05A;
          border-radius: 0;
        }
      }
      > button {
        width: 150px;
        color: #FFFFFF;
        background-color: #94C05A;
        margin-left: 15px;
      }
    }
  }
</style>